<template>
    <div class="config-box">
        <div class="config-title">
            <span>SNMP</span>
            <a-switch style="margin-left: 4px;" size="small" v-model="checked" />
        </div>
        <div class="config-content" style="margin-top: 16px;">
            <a-form :form='form'>
                <a-form-item label="管理ip地址" v-bind='formLayout' has-feedback>
                    <a-input v-decorator="['ip', {
                        rules: [
                            { required: true, message: $t('Enter') + $t('Bucket') + $t('Name') },
                            { pattern: /^[a-z][a-z0-9\-./]{2,62}$/, message: $t('Not_enter_special_characters5') }]
                    }]" placeholder="请输入管理ip地址">
                    </a-input>
                </a-form-item>
                <a-form-item label="端口号" v-bind="formLayout">
                    <a-input v-decorator="['port', { initialValue: '162' }]" disabled>
                    </a-input>
                </a-form-item>
                <a-form-item label="版本单选框" v-bind="formLayout">
                    <a-select v-decorator="['owner',{
                        rules:[{required:true,message:$t('Choose')+$t('Owner')}]
                    }]" :placeholder="$t('Choose')+$t('Owner')" @change="handleSelect">
                    <a-select-option v-for="item in warningLevel" :value='item.value' :key="item.value">{{ item.label }}</a-select-option>
                </a-select>
                </a-form-item>
                <a-form-item label="团体字" v-bind='formLayout' has-feedback>
                    <a-input v-decorator="['team', {
                        rules: [
                            { required: true, message: $t('Enter') + $t('Bucket') + $t('Name') },
                            { pattern: /^[a-z][a-z0-9\-./]{2,62}$/, message: $t('Not_enter_special_characters5') }]
                    }]" placeholder="public">
                    </a-input>
                </a-form-item>
            </a-form>
        </div>
        <div class="config-foot-btn">
            <a-button type="primary">
                发送测试告警
            </a-button>
            <a-button type="danger" style="margin-left: 8px" @click="handleReset">
                重置
            </a-button>
            <a-button type="primary" style="margin-left: 8px" @click="handleConfirm">
                保存
            </a-button>
        </div>
    </div>
</template>

<script>
export default {
    name: "SNMP",
    data() {
        return {
            form: this.$form.createForm(this),
            formLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 17 }
            },
            saveLoading: false,
            contentLoading: false,
            warningLevel: [
                { label: '全部等级', value: '全部等级' },
                { label: '提示', value: '提示' },
                { label: '警告', value: '警告' },
                { label: '严重', value: '严重' },
            ],
        }
    },
    props: ['checked'],
    methods: {
        handleReset() {
            this.form.resetFields();
        },
        handleConfirm() {
            this.form.validateFields((err, value) => {
                if (!err) {
                    console.log(value)
                }
            })
        },
        handleSelect(value) {
            console.log(value)
        },
        onChange(checked) {
            let flag = checked === true ? 1 : 0
            this.$emit('switch-change', { 'snmp': flag })
        },
    }

}
</script>
<style scoped>
.config-box {
    position: relative;
    border: 1px solid #eee;
    width: 380px;
    height: 400px;
    margin-right: 20px;
    box-shadow: 0 0 8px .5px rgba(0, 0, 0, 0.1);
}

.config-box:hover {
    box-shadow: 0 0 8px .5px rgba(0, 0, 0, 0.2);
    transition: all .3s;
}

.config-content {
    height: 280px;
    overflow: hidden;
}

.config-content:hover {
    overflow-y: auto;
    overflow-x: hidden;
}

.config-foot-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.config-title {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #333333;
}

</style>
